<template>
  <div>
    <div class="pageCard">
      <a-form layout="inline" :model="formSearch">
        <a-form-item>
          <a-input v-model:value="formSearch.name" placeholder="请输入菜单名称">
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="getSearch">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="toresetFields">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
     <a-tabs v-model:activeKey="activeKey" @change="slectactiveKey" v-if="userInfo.type != 'admin'">
    <a-tab-pane key="hospital" tab="医院端"></a-tab-pane>
    <a-tab-pane key="staff" tab="APP端"></a-tab-pane>
  </a-tabs>
    <div style="background: #fff">
      <a-table
        style="padding: 0 20px"
        :columns="columns"
        :rowKey="(record) => record.id"
        :data-source="list"
        :row-selection="rowSelection"
      >
        <template #type="{ record }">
          <a-button type="primary" size="small" v-if="record.type == 'base'">菜单</a-button>
          <a-button type="primary" size="small" v-else>按钮</a-button>
        </template>

        <template #operation="{ record }">
          <div style="display: flex; align-items: center">
             <div
              v-if="record.type == 'base'"
              style="cursor: pointer; padding: 0 4px"
              class="color_blue"
               @click="handleAddLevel(record)"
            >
              添加子级菜单
            </div>
            <div
              style="cursor: pointer; padding: 0 4px"
              class="color_blue"
              @click="editHandle(record)"
            >
              编辑
            </div>
            <div
              style="cursor: pointer; padding: 0 4px"
              class="color_red"
              @click="delHandle(record)"
            >
              删除
            </div>
          </div>
        </template>
        <template #title>
          <div class="ANTTable_header">
            <div style="font-weight: bold">菜单列表</div>
            <a-button type="primary" @click="addHandle">创建菜单</a-button>
          </div>
        </template>
      </a-table>
    </div>

    <a-modal
      width="40%"
      v-model:visible="visible"
      :title="handleTitle"
      @ok="handleOk"
      @cancel="handleCancle"
      ok-text="确认"
      cancel-text="取消"
    >
      <child
        v-if="visible"
        :handleType="handleType"
        :handleRow="handleRow.data"
        ref="child"
        @finish="finishHandle"
      ></child>
    </a-modal>
  </div>
</template>
<script>
import child from "./components/child.vue";
import { createVNode, onMounted, reactive, ref, toRefs, watch } from "vue";
import { menusList, deleteMenus } from "@/api/setting1.js";
import * as utils from "@/utils/index.js";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Form } from "ant-design-vue";
import { Modal, message } from "ant-design-vue";
import { getUserInfo } from "@/utils/auth";
// 表格Column
const columns = [
  {
    title: "菜单名称",
    dataIndex: "name",
  },
  {
    title: "菜单编码",
    dataIndex: "perms",
  },
  {
    title: "菜单路由",
    dataIndex: "url",
  },
  {
    title: "菜单类型",
    dataIndex: "type",
    slots: { customRender: "type" },
  },

  {
    title: "操作",
    dataIndex: "operation",
    width: 200,
    slots: { customRender: "operation" },
  },
];
const useForm = Form.useForm;
export default {
  components: {
    child,
    ExclamationCircleOutlined,
  },
  setup() {
    const activeKey = ref('hospital')
    const formSearch = reactive({
      name: "",
      sysFlag:'hospital'
    });
    const userInfo = ref(getUserInfo() ? JSON.parse(getUserInfo()) : {})
    const tableData = reactive({ list: [], total: 0 });
    const { resetFields } = useForm(formSearch);

    // 切换tab
    const slectactiveKey = (val)=>{
      console.log(val)
      formSearch.sysFlag = val;
      getSearch()
    }
    // 查询
    const getSearch = () => {
      handleGetDataList();
    };
    // 获取表格
    const handleGetDataList = () => {
      tableData.list = [];
      let params = {
        isPage: false,
        sysFlag:
          userInfo.value.type == "admin" ? "admin" : formSearch.sysFlag,
        name: formSearch.name,
      };
      menusList(params).then((res) => {
        if (res && res.success) {
          console.log(123);
          console.log(res);
          tableData.list = utils.treeDataTranslate(res.data);
        }
      });
    };

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
      },
    };

    // 重置表格
    const toresetFields = () => {
      resetFields();
      getSearch();
    };
    // 监听表格
    watch(
      () => formSearch,
      (curAge, preAge) => {
        getSearch();
      },
      { deep: true }
    );

    //  新增功能
    const visible = ref(false);
    const handleType = ref("add");
    const handleTitle = ref("新增菜单");
    const handleRow = reactive({ data: {} });
    const addHandle = () => {
      visible.value = true;
      handleType.value = "add";
      handleTitle.value = "新增菜单";
       handleRow.data= {
          level:false,
         sysFlag:activeKey.value
       }
    };
    // 新增子集菜单
     const handleAddLevel = (_row) => {
      visible.value = true;
      handleType.value = "add";
      handleTitle.value = "添加子级菜单";
      handleRow.data = {
        level:true,
        parentName: _row.name,
        parentId:_row.id,
        sysFlag:_row.sysFlag
      }
    };
    const editHandle = (data) => {
      visible.value = true;
      handleType.value = "edit";
      handleTitle.value = "编辑菜单";
      handleRow.data = data;
    };
    // 删除
    const delHandle = (data) => {
      Modal.confirm({
        title: () => "提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () =>
          createVNode("div", { style: "color:red;" }, "确认删除该菜单"),
        onOk() {
          deleteMenus(data.id).then((res) => {
            if (res && res.success) {
              message.success("删除成功");
              getSearch();
            }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "test",
      });
    };

    // 完成操作
    const finishHandle = () => {
      visible.value = false;
      handleGetDataList();
    };

    const child = ref(null);
    const handleOk = () => {
      child.value.handleSave();
    };

    const handleCancle = () => {
      child.value.resetForm();
    };
    onMounted(() => {
      handleGetDataList();
    });
    return {
      child, //子组件
      formSearch,
      toresetFields,
      userInfo,
      columns,
      ...toRefs(tableData),
      handleGetDataList,
      getSearch,

      visible,
      addHandle,
      handleAddLevel,
      editHandle,
      handleTitle,
      handleRow,
      handleType,
      handleOk,
      handleCancle,
      finishHandle,

      delHandle,
      activeKey,
      slectactiveKey
    };
  },
};
</script>